<template>
	<view class='code'>
		<view>
			<u-navbar :autoBack="true"></u-navbar>
		</view>
		<view class='code-main'>
			<view class='code-msg'>输入6位验证码</view>
			<view class='code-time'>
				<view>验证码已发送至 {{ setPhone }}</view>
				<view v-if='isShow'>{{ codeNum }}s后重发</view>
				<view v-if='!isShow' @click='sendCode'>收不到验证码?</view>
			</view>
			<view class='code-num'>
				<u-code-input v-model="valCode" :maxlength="6"></u-code-input>
			</view>
		</view>
	</view>
</template>

<script>
import { sendRegisterOrLoginCaptcha , loginByMobile  } from '../../api/login.js'
import { Encrypt } from '@/utils/aes.js'
export default{
	data () {
		return {
			phone:'',
			codeNum:60,
			valCode:'',
			isShow:true
		}
	},
	onLoad( e ) {
		this.phone = e.tel;		
		this.sendCode();
		
		//发送短信验证码
		sendRegisterOrLoginCaptcha({
			mobile:this.phone
		})
	},
	computed:{
		setPhone(){
			let arr = this.phone.split('');
			arr.splice(3,0,' ');
			arr.splice(8,0,' ');
			return arr.join('');
		}
	},
	methods:{
		sendCode(){
			this.isShow=true;
			let timer = setInterval(()=>{
				this.codeNum--;
				if( this.codeNum <= 0 ){
					this.isShow=false;
					this.codeNum = 60;
					clearInterval( timer );
				}
			},1000)
		}
	},
	watch:{
		valCode( newVal , oldVal ){
			if( newVal.length == 6 ){
				//发起请求
				loginByMobile({
					mobile:Encrypt(this.phone),
					captcha:newVal
				}).then(res=>{
					if( res.meta.code =='10006' ){
						console.log(res.data.accessToken);
						//返回我的页面
						uni.switchTab({
							url:'/pages/tabs/me'
						})
					}
				})
			} 
		}
	}
}
</script>


<style>
.code{
	width: 100vw;
	height: 100vh;
	background: rgba(255,255,255,0.39);
}
.code-main{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top:163rpx;
	padding-left:62rpx;
	padding-right: 62rpx;
}
.code-msg{
	font-size: 56rpx;
	font-weight: bold;
	color: #343234;
}
.code-time{
	display: flex;
	align-items: center;
	justify-content:space-between;
	width: 100%;
	padding-top:33rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #343234;
	opacity: 0.53;
}
.code-num{
	display: flex;
	justify-content: center;
	width: 100%;
	padding-top:83rpx;
}
</style>